<template>
  <div class="main" id="country"></div>
</template>

<script>
import china from "/public/js/China.json"; // 引入地图json数据
import * as echarts from "echarts";
export default {
  name: "app",
  data() {
    return {
      cityData: [
        {
          name: "北京",
          value: 0,
        },
        {
          name: "天津",
          value: 0,
        },
        {
          name: "上海",
          value: 0,
        },
        {
          name: "重庆",
          value: 0,
        },
        {
          name: "河北",
          value: 0,
        },
        {
          name: "河南",
          value: 0,
        },
        {
          name: "云南",
          value: 39,
        },
        {
          name: "辽宁",
          value: 0,
        },
        {
          name: "黑龙江",
          value: 85,
        },
        {
          name: "湖南",
          value: 0,
        },
        {
          name: "安徽",
          value: 0,
        },
        {
          name: "山东",
          value: 0,
        },
        {
          name: "新疆",
          value: 46,
        },
        {
          name: "江苏",
          value: 0,
        },
        {
          name: "浙江",
          value: 0,
        },
        {
          name: "江西",
          value: 0,
        },
        {
          name: "湖北",
          value: 0,
        },
        {
          name: "广西",
          value: 0,
        },
        {
          name: "甘肃",
          value: 0,
        },
        {
          name: "山西",
          value: 0,
        },
        {
          name: "内蒙古",
          value: 0,
        },
        {
          name: "陕西",
          value: 56,
        },
        {
          name: "吉林",
          value: 0,
        },
        {
          name: "福建",
          value: 0,
        },
        {
          name: "贵州",
          value: 0,
        },
        {
          name: "广东",
          value: 0,
        },
        {
          name: "青海",
          value: 0,
        },
        {
          name: "西藏",
          value: 57,
        },
        {
          name: "四川",
          value: 0,
        },
        {
          name: "宁夏",
          value: 0,
        },
        {
          name: "海南",
          value: 0,
        },
        {
          name: "台湾",
          value: 0,
        },
        {
          name: "香港",
          value: 12,
        },
        {
          name: "澳门",
          value: 56,
        },
      ],
    };
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById("country"));

      echarts.registerMap("area", china);
      let outdata = []; //地图区域挂载数据
      let maxData = parseInt(this.cityData[0].value); //热力最大值
      let minData = parseInt(this.cityData[0].value); //热力最小值

      this.cityData.forEach((item, index) => {
        var num = parseInt(item.value);
        num >= maxData && (maxData = num);
        num <= minData && (minData = num);
        outdata.push({
          name: item.name,
          value: item.value,
          index: index,
        });
        console.log(outdata, "outdata----------------");
      });

      let option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            console.log(params, "-------------params");
            return params.name + "<br>" + params.value;
          },

          // formatter: function (params) {
          //   console.log(params, "--------------params");
          //   if (params.value) {
          //     return params.name + "<br>" + params.value;
          //   } else {
          //     return params.name + "<br>" + "0";
          //   }
          // },

          //           tooltip: {
          // trigger: 'item',
          // formatter: function (params) {
          // if(params.value){
          // return params.seriesName + '<br/>' + params.name + ' : ' + params.value;
          // }else{
          // return params.seriesName + '<br/>' + params.name + ' : ' + '0'; }
          // }
          // }
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "5%",
          bottom: "1%",
          // show: true,
          // backgroundColor:'#000'
        },
        // 地图的阴影底图
        geo: {
          map: "area",
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          aspectScale: 0.9,
          layoutCenter: ["50%", "52.5%"], //地图位置
          layoutSize: "110%",
          itemStyle: {
            normal: {
              shadowColor: "rgba(0,228,242,0.5)",
              shadowBlur: 5,
              color: "#082A52",
            },
            emphasis: {
              areaColor: "#082A52",
            },
          },
          z: 2,
        },
        //就这东西能根据地图数据value值实现地图不同颜色
        visualMap: {
          min: minData,
          max: maxData,
          right: "90%",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          show: true,
          inRange: {
            //颜色数组
            color: [
              "rgba(1,60,128,1)",
              "rgba(3,120,204,1)",
              "rgba(1,128,236,1)",
              "rgba(3,115,240,1)",
              "rgba(1,190,239,1)",
              "rgba(213,141,56,1)",
              "rgba(212,177,66,1)",
            ],
          },
        },
        series: [
          {
            type: "map",
            map: "area",
            aspectScale: 0.9,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "110%",
            label: {
              normal: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
              },
              emphasis: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
              },
            },
            // tooltip:{} tooltip可结合formatter、div、css实现样式
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0, 0.6)",
                borderWidth: 0.8,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0a56BC", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#12A6F2",
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                shadowColor: "rgba(0, 0, 0, 1)",
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F5B615", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#E27B0d",
                    },
                  ],
                },
              },
            },
            zlevel: 1,
            data: outdata,
          },
        ],
      };

      myChart.clear();
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: rgb(51, 51, 85);
}
</style>
